<html>
<head>
<title>Rotating 3D Cube in JavaScript</title>
<style type="text/css">
body{background:#000;color:#FF0;height:100%;margin:0;padding:0;width:100%;}
b{position:absolute;}
a{color:gold;}
a:hover{color:#FF0;}
address{bottom:10px;font-family:Georgia;font-style:normal;position:absolute;right:10px;text-align:right;}
</style>
</head>
<body onmousemove="a = event.clientX / 99; b = event.clientY / 99;">

<script type="text/javascript">

/* I wrote this script in a few minutes just for fun. It's not made to win any
   competition. */

var dimension = 1, a = 0, b = 0, i = 2;
while (i--) document.write('<b id="l' + i + '"> <img src="files/qplus.png" width="92"/> </b>');

function f()
{
	i = 0;
	for (x = -dimension; x <= dimension; x += dimension)
		for (y = -dimension; y <= dimension; y += dimension)
			for (z = -dimension; z <= dimension; z += dimension)
			{
				u = x;
				v = y;
				w = z;
				u2 = u * Math.cos(a) - v * Math.sin(a);
				v2 = u * Math.sin(a) + v * Math.cos(a);
				w2 = w;
				u = u2; v = v2; w = w2;
				u2 = u;
				v2 = v * Math.cos(b) - w * Math.sin(b);
				w2 = v * Math.sin(b) + w * Math.cos(b);
				u = u2; v = v2; w = w2;
				var c = (w + 2) * 70 | 0;
				if (c < 0) c = 0;
				if (c > 255) c = 255;
				s = document.getElementById('l' + i).style;
				s.left = 300 + u * (w + 2) * 50;
				s.top  = 300 + v * (w + 2) * 50;
				s.color = 'rgb(' + c + ', ' + c + ', 0)';
				s.fontSize = (w + 2) * 16 | 0 + 'px';
				/* The Digg users missed depth sort, so here it is. */
				s.zIndex = (w + 2) * 10 | 0;
				i++;
			}
}

/* Using a timer instead of the onmousemove handler wastes CPU time but makes
   the animation much smoother. */
setInterval('f()', 17);

</script>
</body>
</html>